﻿<div class="blade-static __bottom" ng-disabled="!isValid()" ng-include="'$(Platform)/Scripts/common/templates/ok.tpl.html'"></div>
<div class="blade-content __medium-wide">
    <div class="blade-inner">
        <div class="inner-block">
            <form name="mappingForm" class="form">
                <fieldset ng-init="setForm(mappingForm)">
                <legend class="ng-binding">CSV fields automatically mapped to same product properties</legend>
                <div class="form-group">
                    <a class="clear text-mini __link" ng-click="clearPropertyCsvColumns()" ng-if="blade.importConfiguration.propertyCsvColumns.length > 0">Clear all</a>
                    <ul class="list __inline __chosen">
                        <li class="list-item" ng-repeat="item in blade.importConfiguration.propertyCsvColumns">
                            <a class="list-remove" ng-click="removePropertyCsvColumn(item)">×</a>
                            <span class="list-name">{{item}}</span>
                        </li>
                    </ul>
                </div>
            </fieldset>
            <fieldset>
                <legend class="ng-binding">Chose map CSV columns with product fields</legend>
                <div class="table-wrapper">
                    <table class="table hovered">
                        <thead>
                            <tr>
                                <th class="table-col">Product property</th>
                                <th class="table-col">CSV column</th>
                                <th class="table-col">Custom value</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="table-item" ng-repeat="mappingItem in blade.importConfiguration.propertyMaps">
                                <td class="table-col __product-name">
                                    <span>{{mappingItem.entityColumnName}}</span>
                                </td>
                                <td class="table-col">
                                    <ui-select ng-required="!mappingItem.customValue && mappingItem.isRequired" ng-model="mappingItem.csvColumnName">
                                        <ui-select-match allow-clear="true" placeholder="Select ...">{{$select.selected}}</ui-select-match>
                                        <ui-select-choices repeat="x as x in blade.importConfiguration.csvColumns | filter: $select.search ">
                                            <span ng-bind-html="x | highlight: $select.search"></span>
                                        </ui-select-choices>
                                    </ui-select>
                                </td>
                                <td class="table-col __product-name">
                                    <div class="form-input">
                                        <input ng-required="!mappingItem.csvColumnName && mappingItem.isRequired" ng-model="mappingItem.customValue" placeholder="Default value...">
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </fieldset>
            </form>
        </div>
    </div>
</div>